import { useRef } from "react";
import ImgList from "../components/ImgList";
import PhotoForm from "../components/PhotoForm";
import GlobalForm from "../components/GlobalForm";
import { photoMaxSize } from "../config/index";
import IndexContext from "../context";
import useIndex from "../hooks/useIndex";
import styles from "./index.module.scss";
import Canvas, { ICanvasRef } from "../components/Canvas";

const IndexPage = () => {
  const canvasRef = useRef<ICanvasRef>(null);
  const { context } = useIndex({ canvasRef });
  return (
    <IndexContext.Provider value={context}>
      <div className={styles.content}>
        <div className={styles.leftImgList}>
          <ImgList />
        </div>
        {context.photoList.length === 0 ? (
          <GlobalForm />
        ) : (
          <div
            className={styles.photoCanvas}
            style={{ minWidth: photoMaxSize }}
          >
            <Canvas ref={canvasRef} />
          </div>
        )}
        {context.showPhoto && (
          <div className={styles.operationArea}>
            <PhotoForm></PhotoForm>
          </div>
        )}
      </div>
    </IndexContext.Provider>
  );
};
export default IndexPage;
